<template>
    <el-row>
        <el-col :span="24" class="mb20">
            <h3>当前套餐：</h3>
        </el-col>
        <el-table :data="tableData1" stripe border style="width: 100%">
            <el-table-column prop="carrier" label="运营商" width="150">
            </el-table-column>
            <el-table-column prop="package_name" label="套餐名称" width="150">
            </el-table-column>
            <el-table-column prop="package_type" label="套餐类型" width="150">
            </el-table-column>
            <el-table-column
            label="生效时间"
            width="150"
            >
                <template slot-scope="scope">
                    {{ scope.row.on_date}}
                </template>
            </el-table-column>
            <el-table-column
            label="失效时间"
            width="150"
            >
                <template slot-scope="scope">
                    {{ scope.row.off_date}}
                </template>
            </el-table-column>
            <el-table-column prop="yi_flow" label="已使用流量" width="100">
            </el-table-column>
            <el-table-column prop="all_flow" label="本周期总流量" width="120">
            </el-table-column>
            <el-table-column prop="sheng_flow" label="剩余流量" width="100">
            </el-table-column>
            <el-table-column prop="circle" label="周期序列">
            </el-table-column>
        </el-table>
        <el-col :span="24" class="mt20 mb20">
            <h3>后续套餐：</h3>
        </el-col>
        <el-table :data="tableData2" stripe border fit style="width: 100%" class="mt20">
            <el-table-column prop="hou_carrier" label="运营商" width="230">
            </el-table-column>
            <el-table-column prop="hou_package_name" label="套餐名称" width="230">
            </el-table-column>
            <el-table-column prop="hou_package_type" label="套餐类型" width="230">
            </el-table-column>
            <el-table-column
            label="生效时间"
            width="230"
            >
                <template slot-scope="scope">
                    {{ scope.row.hou_on_date}}
                </template>
            </el-table-column>
            <el-table-column
            label="失效时间"
            >
                <template slot-scope="scope">
                    {{ scope.row.hou_off_date}}
                </template>
            </el-table-column>
        </el-table>
        <el-col :span="24" class="mt20 mb20">
            <h3>订购历史：</h3>
        </el-col>
        <el-table :data="tableData3" stripe border fit style="width: 100%" class="mt20">
            <el-table-column prop="num" label="订购编号" width="100">
            </el-table-column>
            <el-table-column prop="product_name" label="产品名称" width="100">
            </el-table-column>
            <el-table-column prop="package_type" label="套餐类型" width="100">
            </el-table-column>
            <el-table-column
            label="订购时间"
            width="150"
            >
                <template slot-scope="scope">
                    {{ scope.row.ding_time}}
                </template>
            </el-table-column>
            <el-table-column prop="isActivity" label="是否生效" width="100">
            </el-table-column>
            <el-table-column prop="dingCircle" label="订购周期" width="100">
            </el-table-column>
            <el-table-column prop="dingPrice" label="订购金额" width="100">
            </el-table-column>
            <el-table-column
            label="生效时间"
            width="150"
            >
                <template slot-scope="scope">
                    {{ scope.row.on_date}}
                </template>
            </el-table-column>
            <el-table-column
            label="失效时间"
            width="150"
            >
                <template slot-scope="scope">
                    {{ scope.row.off_date}}
                </template>
            </el-table-column>
            <el-table-column prop="yuan" label="来源">
            </el-table-column>
        </el-table>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                tableData1: [
                    {
                       carrier: '移动',
                       package_name: '新自定义月',
                       package_type: '月套餐',
                       on_date: '2018-06-13',
                       off_date: '2018-07-19',
                       yi_flow: '0.0 KB',
                       all_flow: '0.0 KB',
                       sheng_flow: '0.0 KB',
                       circle: '0/1'
                    }
                ],
                tableData2: [
                    {
                       hou_carrier: '移动',
                       hou_package_name: '新自定义月',
                       hou_package_type: '月套餐',
                       hou_on_date: '2018-06-13',
                       hou_off_date: '2018-07-19'
                    }
                ],
                tableData3: [
                    {
                       num: '1120112',
                       product_name: '流量池',
                       package_type: '当月',
                       ding_time: '2018-8-12',
                       isActivity: '是',
                       dingCircle: '0/1',
                       dingPrice: '200',
                       on_date: '2018-06-12',
                       off_date: '2018-06-28',
                       yuan: '移动'
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>